<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/common.js"></script>
</head>
<style>
    .empTab{
        width: 700px;
        border-collapse: collapse;
        margin: 50px auto;
        cursor: pointer;
    }
    .empTab td{
        text-align: center;
    }
    .cover{
        background-color: black;
        opacity: 0.7;
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0px;
        right: 0px;
        display: none;
    }
    .modify{
        width: 400px;
        height: 150px;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        z-index: 1;
        display: none;
        background-color: white;
        padding: 20px;
    }
</style>
<body>
部门人员
<hr>
<table id="emps" class="empTab" border="1">
    <tr>
        <th>EmpName</th>
        <th>Salary</th>
        <th>HireDate</th>
    </tr>
</table>
<div class="cover"></div>
<div class="modify">
    请输入修改的薪资
    <hr>
    <input type="text" id="salary">
    <input type="button" value="修改" id="btnModify">
</div>
</body>
</html>
<script>
    //解析url传递的参数,获得部门编号
    var jsonParam = parseUrl();
    //alert(jsonParam.depId);

    var empId;

    //发送请求查询部门的人员信息
    $.ajax({
        url:"emp/all/"+jsonParam.depId,
        type:"get",
        dataType:"json",
        success:function (response) {
            if(response.httpCode == 200){
                var list = response.data;
                for(var i = 0; i < list.length; i++){
                    $("#emps").append("" +
                        "<tr id='"+list[i].empId+"'>" +
                        "<td>"+list[i].empName+"</td>" +
                        "<td>"+list[i].salary+"</td>" +
                        "<td>"+list[i].hireDate+"</td></tr>")
                }
            }
            else{
                alert("该部门未找到员工信息！");
            }

            $("#emps tr").click(function () {
                //alert(this.id);
                empId = this.id;
                //显示透明层
                $(".cover").show();
                $(".modify").fadeIn("normal");
            })
        }
    })

    $("#btnModify").click(function () {
        $(".cover").hide();
        $(".modify").hide();
        //获得修改的薪资
        var salary = $("#salary").val();
        console.log("salary="+salary);
        //发送修改薪资的请求
        $.ajax({
            url:"emp/salary/"+empId+"/"+salary,
            type: "put",
            //data:{"salary":salary},
            dataType: "json",
            success:function (response) {
                //修改指定行的薪资列数据
                $("#"+empId).find("td:eq(1)").html(salary);
            }
        })
    })
</script>